<template>
  <div id="app">
    <el-container class="container">
      <el-aside width="200px">
        <el-menu style="height: 100%" default-active="1" class="el-menu-vertical-demo" background-color="#304156"
          text-color="#fff" active-text-color="#ffd04b">
          <div style="height: 60px; line-height: 60px; text-align: center">
            <img alt="" style="
                width: 20px;
                position: relative;
                top: 5px;
                margin-right: 5px;
              " />
            <b style="color: white">体育馆预约系统</b>
          </div>
          <el-menu-item index="1" @click="handleMenuItemClick('1')"><i
              class="el-icon-user-solid"></i>用户信息管理</el-menu-item>
          <el-menu-item index="2" @click="handleMenuItemClick('2')"><i
              class="el-icon-notebook-1"></i>预约记录管理</el-menu-item>
          <el-menu-item index="3" @click="handleMenuItemClick('3')"><i class="el-icon-house"></i>场地信息管理</el-menu-item>
        </el-menu></el-aside>
      <el-container>
        <el-header class="header">
          <!-- 用户头像 -->
          <div class="opt-wrapper">
            <el-dropdown class="adm_user" :hide-on-click="false">
              <div class="demo-basic--circle">
                <div class="block">
                  <el-avatar :size="40" :src="avatar" :class="['avatar-info']">
                  </el-avatar>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item><i class="el-icon-switch-button"></i>退出登录</el-dropdown-item>
                  </el-dropdown-menu>
                </div>
              </div>
            </el-dropdown>
          </div>
        </el-header>
        <el-main class="main">
          <!-- 用户信息管理 -->
          <div v-show="showTable == 1">
            <!-- 用户操作行 -->
            <div class="manage"></div>
            <!-- 用户信息表格 -->
            <div>
              <el-table border ref="multipleTable" :data="tableData_1
                .filter(
                  (data) =>
                    !search_1 ||
                    data.uname
                      .toLowerCase()
                      .includes(search_1.toLowerCase())
                )
                .slice((currentPage - 1) * pageSize, currentPage * pageSize)
                " tooltip-effect="dark" style="width: 100%">
                <el-table-column label="编号" prop="id"> </el-table-column>
                <el-table-column label="用户名" prop="uname"> </el-table-column>
                <el-table-column label="年龄" prop="age"> </el-table-column>
                <el-table-column label="性别" prop="sex"><template slot-scope="scope">
                    <span v-show="scope.row.sex === 1">男生</span>
                    <span v-show="scope.row.sex === 0">女生</span>
                  </template></el-table-column>
                <el-table-column label="学院" prop="college"> </el-table-column>
                <el-table-column label="班级" prop="cla"> </el-table-column>
                <el-table-column label="信用分" prop="credit"></el-table-column>
                <el-table-column label="">
                  <template slot="header">
                    <el-input v-model="search_1" size="mini" placeholder="输入关键字搜索" />
                  </template>
                  <template slot-scope="scope">
                    <el-button type="text" @click="handleEditUser(scope.row)">修改</el-button>
                    <el-button type="text" @click="handleDeleteUser(scope.row)">移除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <!-- 分页 -->
            <div class="pages-div">
              <el-pagination :current-page.sync="currentPage" :page-sizes="[3, 5, 10, 20]" :page-size.sync="pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="tableData_1.length">
              </el-pagination>
            </div>
          </div>
          <!-- 预约记录管理 -->
          <div v-show="showTable == 2">
            <!-- 操作行 -->
            <div class="manage"></div>
            <!-- 表格 -->
            <div>
              <el-table border ref="multipleTable" :data="tableData_2
                .filter(
                  (data) =>
                    !search_2 ||
                    data.pDate
                      .toLowerCase()
                      .includes(search_2.toLowerCase())
                )
                .slice((currentPage - 1) * pageSize, currentPage * pageSize)
                " tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChangePreorder">
                <el-table-column label="预定者" prop="uName"> </el-table-column>
                <el-table-column label="场地名" prop="cName"> </el-table-column>
                <el-table-column label="日期" prop="pDate"> </el-table-column>
                <el-table-column label="时间段" prop="startTime">
                  <template slot-scope="scope">
                    <span>{{ scope.row.startTime }}~{{ scope.row.endTime }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="状态" prop="pState">
                  <template slot-scope="scope">
                    <span v-show="scope.row.pState === 1">已预约</span>
                    <span v-show="scope.row.pState === 0">预约已过期</span>
                  </template>
                </el-table-column>
                <el-table-column label="操作">
                  <template slot="header">
                    <el-input v-model="search_2" size="mini" placeholder="输入关键字搜索" />
                  </template>
                  <template slot-scope="scope">
                    <el-button type="text" @click="handleEditPreorder(scope.row)">修改</el-button>
                    <el-button type="text" @click="handleDeletePreorder(scope.row)">移除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <!-- 分页 -->
            <div class="pages-div">
              <el-pagination :current-page.sync="currentPage" :page-sizes="[3, 5, 10, 20]" :page-size.sync="pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="tableData_2.length">
              </el-pagination>
            </div>
          </div>
          <!-- 场地信息管理 -->
          <div v-show="showTable == 3">
            <!-- 操作行 -->
            <div class="manage">
              <el-button plain @click="groundAdd()">新增</el-button>
            </div>
            <!-- 表格 -->
            {{ multipleSelection }}
            <div>
              <el-table border ref="multipleTable" :data="tableData_3
                .filter(
                  (data) =>
                    !search_3 ||
                    data.cName
                      .toLowerCase()
                      .includes(search_3.toLowerCase())
                )
                .slice((currentPage - 1) * pageSize, currentPage * pageSize)
                " tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChangeGround">
                <!-- <el-table-column type="selection" width="55"> </el-table-column> -->
                <el-table-column label="编号" prop="id"> </el-table-column>
                <el-table-column label="场地名" prop="cName"> </el-table-column>
                <el-table-column label="场地类型" prop="cType">
                </el-table-column>
                <el-table-column label="校区" prop="cCampus"> </el-table-column>
                <el-table-column label="费用" prop="cost"> </el-table-column>
                <el-table-column label="状态" prop="state">
                  <template slot-scope="scope">
                    <span v-show="scope.row.state === 1">启用</span>
                    <span v-show="scope.row.state === 0">未启用</span>
                  </template>
                </el-table-column>
                <el-table-column label="操作">
                  <template slot="header">
                    <el-input v-model="search_3" size="mini" placeholder="输入关键字搜索" />
                  </template>
                  <template slot-scope="scope">
                    <el-button type="text" @click="handleEditGround(scope.row)">修改</el-button>
                    <el-button type="text" @click="handleDeleteGround(scope.row)">移除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <!-- 分页 -->
            <div class="pages-div">
              <el-pagination :current-page.sync="currentPage" :page-sizes="[3, 5, 10, 20]" :page-size.sync="pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="tableData_3.length">
              </el-pagination>
            </div>
          </div>
          <!-- 添加弹出框 -->
          <!-- 用户表 -->
          <el-dialog title="用户信息修改" :visible.sync="VisibleUser" width="30%" :before-close="handleCloseUser">
            <el-form :model="userForm" :rules="userRules" ref="userForm" label-width="100px" class="demo-ruleForm">
              <el-form-item label="用户名" prop="uname">
                <el-input style="width: 250px; height: 30px" :placeholder="userForm.uname" disabled></el-input>
              </el-form-item>
              <el-form-item label="信用分" prop="credit">
                <el-input style="width: 250px; height: 30px" v-model="userForm.credit"></el-input>
              </el-form-item>

              <el-form-item>
                <el-button type="primary" @click="UsersubmitForm()">立即修改</el-button>
                <el-button @click="UseresetForm()">重置</el-button>
              </el-form-item>
            </el-form>
          </el-dialog>
          <!-- 预约表 -->
          <el-dialog title="预约信息修改" :visible.sync="VisiblePreorder" width="30%" :before-close="handleClosePreorder">
            <el-form :model="preorderForm" :rules="preorderRules" ref="preorderForm" label-width="100px"
              class="demo-ruleForm">
              <el-form-item label="状态" prop="pState" style="margin: 10px 0px">
                <el-select v-model="preorderForm.pState" placeholder="请选择状态">
                  <el-option v-for="item in optionP" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item>
                <el-button type="primary" style="display: flex; 
                margin-top: 30px;
                margin-left: 60px;
                width: 50px%;" @click="submitFormpreorder()">立即修改</el-button>
              </el-form-item>
            </el-form>
          </el-dialog>
          <!-- 场地表 -->
          <el-dialog title="场地信息修改" :visible.sync="VisibleGround" width="30%" :before-close="handleCloseGround">
            <el-form :model="groundrForm" :rules="groundRules" ref="groundrForm" label-width="100px"
              class="demo-ruleForm">
              <el-form-item label="场地名" prop="cName">
                <el-input style="width: 250px; height: 30px" placeholder="场地名" v-model="groundrForm.cName"></el-input>
              </el-form-item>
              <el-form-item label="场地类型" prop="cType">
                <el-input style="width: 250px; height: 30px" placeholder="场地类型" v-model="groundrForm.cType"></el-input>
              </el-form-item>
              <el-form-item label="校区" prop="cCampus">
                <el-input style="width: 250px; height: 30px" placeholder="校区" v-model="groundrForm.cCampus"></el-input>
              </el-form-item>
              <el-form-item type="number" label="费用" prop="cost">
                <el-input style="width: 250px; height: 30px" placeholder="费用" v-model="groundrForm.cost"></el-input>
              </el-form-item>
              <el-form-item label="状态" prop="state" style="margin: 10px 0px">
                <el-select v-model="groundrForm.state" placeholder="请选择状态">
                  <el-option v-for="item in option" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item>
                <el-button type="primary" @click="groundsubmitForm()">立即修改</el-button>
                <el-button @click="groundresetForm()">重置</el-button>
              </el-form-item>
            </el-form>
          </el-dialog>
          <!-- 场地添加表 -->
          <el-dialog title="添加场地信息" :visible.sync="VisibleAddGround" width="30%" :before-close="handleCloseAddGround">
            <el-form :model="groundrAddForm" :rules="groundAddRules" ref="groundrAddForm" label-width="100px"
              class="demo-ruleForm">
              <el-form-item label="场地名" prop="cName">
                <el-input style="width: 250px; height: 30px" placeholder="场地名" v-model="groundrAddForm.cName"></el-input>
              </el-form-item>
              <el-form-item label="场地类型" prop="cType">
                <el-input style="width: 250px; height: 30px" placeholder="场地类型" v-model="groundrAddForm.cType"></el-input>
              </el-form-item>
              <el-form-item label="校区" prop="cCampus">
                <el-input style="width: 250px; height: 30px" placeholder="校区" v-model="groundrAddForm.cCampus"></el-input>
              </el-form-item>
              <el-form-item type="number" label="费用" prop="cost">
                <el-input style="width: 250px; height: 30px" placeholder="费用" v-model="groundrAddForm.cost"></el-input>
              </el-form-item>
              <el-form-item label="状态" prop="state" style="margin: 10px 0px">
                <el-select v-model="groundrAddForm.state" placeholder="请选择状态">
                  <el-option v-for="item in option" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item>
                <el-button type="primary" @click="groundsubmitAddForm()">立即添加</el-button>
                <el-button @click="groundresetAddForm()">重置</el-button>
              </el-form-item>
            </el-form>
          </el-dialog>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>  
  
<script>
import { getGroundInfo, deleteGround, addGround, updateGround } from "@/api/base/ground";
import {
  deletePreorder,
  getPreorderInfo,
  updatePreorder,
  deleteUser
} from "@/api/base/preorder";
import { getUser, updateUser } from "@/api/base/user";
export default {
  name: "App",
  data() {
    return {
      VisibleUser: false,
      VisiblePreorder: false,
      VisibleGround: false,
      VisibleAddGround: false,
      multipleSelection: "",
      currentPage: 1,
      pageSize: 5,
      avatar:
        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      tableData_1: [],
      search_1: "",
      tableData_2: [],
      search_2: "",
      tableData_3: [],
      search_3: "",
      tableData_4: [], // 你的数据对象
      optionP: [
        {
          label: "已预约",
          value: 1,
        },
        {
          label: "预约已失效",
          value: 0,
        },
      ],
      option: [
        {
          label: "启用",
          value: 1,
        },
        {
          label: "未启用",
          value: 0,
        },
      ],
      showTable: 1,
      total: 0,
      // 用户表单、规则
      userForm: {
        id: Number(""),
        sex: Number(""),
        age: Number(""),
        college: "",
        cla: "",
        mobile: "",
        uname: "",
        psw: "",
        credit: "",
      },
      userRules: {
        credit: [
          { required: true, message: "信用分不能为空", trigger: "blur" },
          { message: "请输入数字", trigger: "blur" },
        ],
      },
      // 预约表单、规则
      preorderForm: {
        uId: Number(""),
        gId: Number(""),
        tId: Number(""),
        pDate: "",
        pState: Number(""),
      },
      preorderRules: {
        pState: [{ required: true, message: "状态不能为空", trigger: "blur" }],
      },
      // 场地表单、规则
      groundrForm: {
        id: Number(""),
        cName: "",
        cType: "",
        cCampus: "",
        cost: Number(""),
        state: Number(""),
      },
      groundRules: {
        cName: [{ required: true, message: "场地名不能为空", trigger: "blur" }],
        cType: [
          { required: true, message: "场地类型不能为空", trigger: "blur" },
        ],
        cCampus: [{ required: true, message: "状态不能为空", trigger: "blur" }],
        cost: [
          { required: true, message: "费用不能为空", trigger: "blur" },
          // { type: "number", message: "请输入数字", trigger: "change" },
        ],
        state: [
          { required: true, message: "状态不能为空", trigger: "blur" },
          // { type: "number", message: "请输入数字", trigger: "change" },
        ],
      },
      // 场地添加表单、规则
      groundrAddForm: {
        id: Number(""),
        cName: "",
        cType: "",
        cCampus: "",
        cost: Number(""),
        state: Number(""),
      },
      groundAddRules: {
        cName: [{ required: true, message: "场地名不能为空", trigger: "blur" }],
        cType: [
          { required: true, message: "场地类型不能为空", trigger: "blur" },
        ],
        cCampus: [{ required: true, message: "状态不能为空", trigger: "blur" }],
        cost: [
          { required: true, message: "费用不能为空", trigger: "blur" },
          // { type: "number", message: "请输入数字", trigger: "change" },
        ],
        state: [
          { required: true, message: "状态不能为空", trigger: "blur" },
          // { type: "number", message: "请输入数字", trigger: "change" },
        ],
      },
    };
  },
  computed: {
    formattedItems() {
      return this.tableData_2.map((item) => {
        this.item.pDate = this.convertStringToDate(this.item.pDate);
        return this.tableData_2;
      });
    },
  },
  methods: {
    handleMenuItemClick(index) {
      console.log("菜单点击:", index);
      this.showTable = index;
      this.preorderInit();
      this.userInit();
      this.groundInit();
    },
    async preorderInit() {
      console.log("此区域无人");
      let res = await getPreorderInfo();
      this.tableData_2 = res.data;
    },
    convertStringToDate(dateStr) {
      // 将字符串转换为日期对象，这里假设你的日期字符串是毫秒数格式的。如果不是，需要进行相应的转换。
      const date = new Date(dateStr);
      return date;
    },
    async handleDeletePreorder(row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const token = localStorage.getItem('token');
          let res = await deletePreorder(row,token);

          if (res.code == 200) {
            this.$notify({
              title: "成功",
              message: res.message,
              type: "success",
            });
            this.preorderInit();
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    async userInit() {
      let res = await getUser();
      this.tableData_1 = res.data;
    },
    async groundInit() {
      const token = localStorage.getItem('token');
      let res = await getGroundInfo(token);
      this.tableData_3 = res.data;
    },
    groundAdd() {
      this.VisibleAddGround = true;
    },
    groundDelete() { },
    handleSelectionChangeUser(val) { },
    handleSelectionChangePreorder(val) { },
    handleSelectionChangeGround(val) { },
    handleEditUser(row) {
      this.userForm = row;
      this.VisibleUser = true;
    },
    handleCloseUser() {
      this.VisibleUser = false;
    },
    handleEditPreorder(row) {
      console.log(typeof this.preorderForm);
      this.preorderInit();
      this.preorderForm = row;
      this.VisiblePreorder = true;
    },
    handleClosePreorder() {
      this.VisiblePreorder = false;
    },
    async submitFormpreorder() {
      const token = localStorage.getItem('token');
      let res = await updatePreorder(this.preorderForm, token);
      if (res.code == 200) {
        this.$message({
          message: "添加成功",
          type: "success",
        });
        this.preorderInit();
        this.VisiblePreorder = false;
      } else {
        this.$message.error("添加失败");
      }
    },
    async groundsubmitForm() {
      const token = localStorage.getItem('token');
      let res = await updateGround(this.groundrForm, token);
      if (res.code == 200) {
        this.$message({
          message: "修改成功",
          type: "success",
        });
        this.groundInit();
        this.VisibleGround = false;
      } else {
        this.$message.error("修改失败");
      }
    },
    async groundsubmitAddForm() {
      const token = localStorage.getItem('token');
      let res = await addGround(this.groundrAddForm, token);
      if (res.code == 200) {
        this.$message({
          message: "添加成功",
          type: "success",
        });
        this.groundInit();
        this.VisibleAddGround = false;
      } else {
        this.$message.error("添加失败");
      }
    },
    handleCloseGround() {
      this.VisibleGround = false;
    },
    handleCloseAddGround() {
      this.VisibleAddGround = false;
    },
    handleEditGround(row) {
      this.groundrForm = row;
      this.VisibleGround = true;
    },
    async handleDeleteUser(row) {
      this.$confirm("此操作将永久删除该条记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const token = localStorage.getItem('token');
          let res = await deleteUser(row, token);

          if (res.code == 200) {
            this.$notify({
              title: "成功",
              message: res.message,
              type: "success",
            });
            this.userInit();
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    async handleDeleteGround(row) {
      this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const token = localStorage.getItem('token');
          let res = await deleteGround(row, token);

          if (res.code == 200) {
            this.$notify({
              title: "成功",
              message: res.message,
              type: "success",
            });
            this.groundInit();
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    async UsersubmitForm() {
      const token = localStorage.getItem('token');
      let res = await updateUser(this.userForm,token);
      if (res.code == 200) {
        this.$message({
          message: "添加成功",
          type: "success",
        });
        this.preorderInit();
        this.VisibleUser = false;
      } else {
        this.$message.error("添加失败");
      }
    },
    UseresetForm() {
      this.$refs[this.userForm].resetFields();
    },
    preorderresetForm() {
      // this.preorderForm = {
      //   uId: Number(""),
      //   gId: Number(""),
      //   tId: Number(""),
      //   pDate: "",
      //   pState: Number(""),
      // };
      this.$refs[this.preorderForm].resetFields();
    },
    groundresetForm() {
      // this.groundrForm = {
      //   id: Number(""),
      //   cName: "",
      //   cType: "",
      //   cCampus: "",
      //   cost: Number(""),
      //   state: Number(""),
      // };
      this.$refs[this.groundrForm].resetFields();
    },
    groundresetAddForm() {
      // this.groundrAddForm = {
      //   id: Number(""),
      //   cName: "",
      //   cType: "",
      //   cCampus: "",
      //   cost: Number(""),
      //   state: Number(""),
      // };
      this.$refs[this.groundrAddForm].resetFields();
    },
    // 登录校验
    async hasLoad() {
      this.token = localStorage.getItem('token');
      if (this.token != null)
        this.userInit();
      else
        this.$router.push({ name: 'GXUSTVRS', params: { dialogFormVisible_admin: true } })
    }
  },
  created() {
    this.preorderInit();
    this.userInit();
    this.groundInit();
    this.hasLoad();
  },
};
</script>  
  
<style scoped>
#app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  /* color: rgb(77, 135, 186); */
}

.header {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  margin: 0px 10px;
}

.main {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  margin: 10px 10px;
}

.container {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  margin: 0;
  width: 100%;
  padding: 0;
}

.avatar-info {
  margin-top: 10px;
  margin-right: 40px;
  cursor: pointer;
}

.adm_user {
  position: absolute;
  right: 0;
}

.manage {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}

.pages-div {
  text-align: center;
  margin-top: 10px;
}
</style>